<template>
  <div>
    <div class="pp-t-96">
      <h3 class="fw-b fs-14">二级分类管理（Imbedded Message Identifier，即标准消息标识符IMI）</h3>

      <a-form-model layout="inline" :model="search">

        <!-- 筛选条件与查询 -->

        <a-form-model-item label="">
          <a-input
            v-model="search.imi"
            style="width: 321px"
            placeholder="二级分类名称"
          >
            <a-icon slot="suffix" :component="require('@/assets/icon/search.svg')" @click="changeTable({ current: 1 })" />
          </a-input>
        </a-form-model-item>
        <a-form-model-item label="">
          <a-input
            v-model="search.smi"
            style="width: 321px"
            placeholder="一级分类名称"
          >
            <a-icon slot="suffix" :component="require('@/assets/icon/search.svg')" @click="changeTable({ current: 1 })" />
          </a-input>
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="default" ghost :loading="listBySmiAndImiLoading" @click="resetSearchHandler">
            重置
          </a-button>

        </a-form-model-item>
      </a-form-model>
    </div>
    <!-- table -->
    <div class="pp-rb-box">
      <a-button type="primary" ghost :loading="listBySmiAndImiLoading" @click="addVisible=true">
        新增二级分类
      </a-button>
      <a-table
        class="table-border mt-16"
        :columns="columns"
        size="middle"
        :data-source="listBySmiAndImiList"
        :row-key="(row,index) => row.id"
        :pagination="{
          showTotal:(total)=> `共 ${total} 条数据`,
          showSizeChanger: true,//设置每页显示数据条数
          showQuickJumper: true,
          size:'big',
          current:paginationOptions.pageNum,
          pageSize:paginationOptions.pageSize,
          total:paginationOptions.total
        }"
        :loading="listBySmiAndImiLoading"
        @change="changeTable"
      />
    </div>
    <!-- add -->
    <a-modal
      v-model="addVisible"
      :mask-closable="false"
      title=""
      :width="520"
      :confirm-loading="addRepImiLoading"
      class="rt-i-modal"
      @ok="addConfirmHandler"
      @cancel="cancelHandler"
    >
      <span slot="closeIcon" class="c-dialog-close-icon"><a-icon :component="require('@/assets/icon/close.svg')" /></span>

      <div class="c-dialog-title fw-500">{{ addTitle }}二级分类</div>

      <a-form-model
        ref="addForm"
        :model="addForm"
        :rules="addRules"
        layout="horizontal"
      >
        <a-form-model-item label="二级分类名称IMI" prop="name">
          <a-input
            v-model="addForm.name"
            placeholder="二级分类名称IMI"
            :disabled="addTitle!=='新增'"
            class="input-type-o"
            style="width: 100%"
          />
        </a-form-model-item>
        <a-form-model-item label="中文简称" prop="nameZh">
          <a-input v-model="addForm.nameZh" placeholder="中文简称" class="input-type-o" style="width: 100%" />
        </a-form-model-item>
        <a-form-model-item prop="remark">
          <span slot="label">描述<span class="text-color-9ea5b2 fs-12">选填</span></span>
          <a-textarea
            v-model="addForm.remark"
            style="width: 100%"
            placeholder="描述"
            class="input-type-o"
            :auto-size="{ minRows: 5, maxRows: 8 }"
          />
        </a-form-model-item>
        <a-form-model-item label="归属一级分类" prop="smi">
          <a-select
            v-model="addForm.smi"
            show-arrow
            class="input-type-o"

            style="width: 100%"
            placeholder="归属一级分类"
            allow-clear
          >
            <a-icon slot="suffixIcon" :component="require('@/assets/icon/arrow-down-bold.svg')" />
            <a-select-option v-for="item in firstClassClassificationList" :key="item.id+item.name" :value="item.name">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from 'vuex';
import rowClass from '@/pages/common/rowClass';
import getSmiAndModel from '../getSmiAndModel';
export default {
  mixins: [rowClass, getSmiAndModel],
  data() {
    return {
      search: {},
      addVisible: false,
      addTitle: '新增',
      addForm: {},
      addRules: Object.freeze({
        name: [
          { required: true, message: '请填写', trigger: 'change' }
        ],
        nameZh: [
          { required: true, message: '请填写', trigger: 'change' }
        ],
        smi: [
          { required: true, message: '请选择', trigger: 'change' }
        ]
      }),
      columns: Object.freeze([
        {
          title: '分类名称',
          align: 'left',
          dataIndex: 'name',
          customRender: (value) => {
            return value || '';
          }
        },
        {
          title: '中文简称',
          align: 'left',
          dataIndex: 'nameZh',
          customRender: (value) => {
            return value || '';
          }
        },
        {
          title: '描述',
          align: 'left',
          dataIndex: 'remark',
          customRender: (value) => {
            return value || '';
          }
        },
        {
          title: '所属一级分类',
          align: 'left',
          dataIndex: 'smi',
          customRender: (value) => {
            return value || '';
          }
        },
        {
          title: '创建人',
          align: 'left',
          dataIndex: 'createBy',
          customRender: (value) => {
            return value || '';
          }
        },
        {
          title: '创建时间',
          align: 'left',
          dataIndex: 'createTime',
          customRender: (value) => {
            return value ? this.$moment.utc(value) : '--';
          }
        },
        {
          title: '创建人',
          align: 'left',
          dataIndex: 'updateBy',
          customRender: (value) => {
            return value || '';
          }
        },
        {
          title: '更新时间',
          align: 'left',
          dataIndex: 'updateTime',
          customRender: (value) => {
            return value ? this.$moment.utc(value) : '--';
          }
        },
        {
          title: '操作',
          align: 'left',
          dataIndex: 'option',
          width: 148,
          customRender: (value, record, index) => {
            const { id } = record;
            return [

              <a-button type='small' type='link' onClick={() => this.modifyHandler(record)}>修改</a-button>,
              <a-popconfirm
                title='确认删除此项?'
                ok-type='danger'
                ok-text='确认'
                cancel-text='取消'
                onConfirm={() => this.delItemHandler(id)}
              >

                <a-button type='small' type='link'>删除</a-button>
              </a-popconfirm>

            // <a-button type='primary' size='small' ghost>版本管理</a-button>
            ];
          }
        }
      ])
    };
  },
  computed: {
    ...mapState('secondaryClassification', [
      'listBySmiAndImiLoading',
      'listBySmiAndImiList',
      'addRepImiLoading',
      'paginationOptions'
    ])
  },
  mounted() {
    // this.getSmiList();
    this.changeTable({ current: 1 });
  },
  methods: {
    ...mapMutations('secondaryClassification', [
      'setState'
    ]),
    ...mapActions('secondaryClassification', [
      'getListBySmiAndImi',
      'addRepImi',
      'modifyRepImi',
      'deleteRepImi'
    ]),
    // 重置
    resetSearchHandler() {
      this.search = {};
      this.changeTable({ current: 1 });
    },
    // 新增/修改
    addConfirmHandler() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          if (this.addForm.id) {
            this.modifyRepImi(this.addForm).then((rep) => {
              if (rep) {
                this.addVisible = false;
                this.cancelHandler();
                this.changeTable({ current: 1 });
              }
            });
          } else {
            this.addRepImi(this.addForm).then((rep) => {
              if (rep) {
                this.addVisible = false;
                this.cancelHandler();
                this.changeTable({ current: 1 });
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    // 确认删除
    delItemHandler(id) {
      this.deleteRepImi({ id }).then((rep) => {
        if (rep) {
          this.changeTable({ current: 1 });
        }
      });
    },
    // 修改预赋值
    modifyHandler(row) {
      this.addVisible = true;
      this.addForm = { ...row };
      this.addTitle = '修改';
    },
    // 关闭add
    cancelHandler() {
      this.addForm = {};
      this.addTitle = '新增';
      this.$refs.addForm.resetFields();
    },
    // 获取table
    getData() {
      const params = {
        ...this.search

      };
      this.search.smi ? params.smi = this.search.smi.toLocaleUpperCase() : '';
      this.search.imi ? params.imi = this.search.imi.toLocaleUpperCase() : '';
      this.getListBySmiAndImi(params);
    },
    // 翻页
    changeTable({ current, pageSize = 10 }) {
      if (pageSize !== this.paginationOptions.pageSize) {
        current = 1;
      }
      this.setState({ key: 'paginationOptions', payload: { ...this.paginationOptions, pageNum: current, pageSize }});
      this.getData();
    }
  }
};
</script>

<style>

</style>

